<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="../../libs/layui/layui-2.4.5/dist/css/layui.css">
	<script src="../../libs//layui/layui-2.4.5/dist/layui.js"></script>
	<style>


	</style>
</head>

<body style="margin: 10px;">

	<div id="statistics_data">

	</div>


	<script>

		// var a,b=0,c=2,d=9;
		// var f1 = {a,b:1};
		// var f2 = {b:2,c}
		// var r = Object.assign(f1,f2,{d});
		// console.log(f1);
		// console.log(f2);
		// console.log(r);


		layui.use('table', function () {
			var table = layui.table;
			var $ = layui.jquery;


			$.get('../assets/table/data6.json', function (data1) {
				// console.log(res);

				// console.log(res);

				data1.push({
					"id": 92, "unit": "总计", "total": 21, "age": ""
					, "gte50": 1, "in40": 1, "in30": 1, "lt30": 1, "average": ""
					, "xx": 1, "cz": 1, "gz": 1, "zz": 1, "dz": 1, "bk": 1
				});
				data1.push({
					"id": 92, "unit": "比例", "total": "", "age": 45.1
					, "gte50": 1, "in40": 1, "in30": 1, "lt30": 1, "average": 22
					, "xx": 1, "cz": 1, "gz": 1, "zz": 1, "dz": 1, "bk": 1
				});
				data1.push({
					"id": 93, "unit": "备注", "type": "鹰潭机务段救援列车干部职工共计59人，其中管理干部4人，工人55人，平均年龄为51.76。"
				});

				for (var j = 0; j < 3; j++) {
					var tableId = "tableS" + j;
					$('#statistics_data').append('<div style="margin-bottom:40px" ><div style="font-size: 20px;font-weight: bold;">鹰潭机务段 2024年07月</div><table class="layui-hide" id="' + tableId + '" lay-filter="' + tableId + '" ></table></div>');

					console.log(tableId)


					table.render({
						elem: '#' + tableId
						//,title:"鹰潭机务段  2024年07月"
						// , url: '../assets/table/data3.json' //数据接口
						, data: data1
						, page: false
						, limit: 1000
						// , height: 700
						, cols: [
							[ //标题栏
								, { field: 'unit', title: '主管单位', width: 100, rowspan: 2, align: "center" } //rowspan即纵向跨越的单元格数
								, { field: 'type', title: '救援列车', width: 120, rowspan: 2, align: "center" }
								, { field: 'total', title: '现有人数', width: 100, rowspan: 2, align: "center" }
								, { field: 'isManager', title: '管理/人员', colspan: 2, align: "center" } //colspan即横跨的单元格数，这种情况下不用设置field和width
								, { field: 'age', title: '年龄', width: 80, rowspan: 2, align: "center" }
								, { field: 'degree', title: '文化程度', width: 80, rowspan: 2, align: "center" }
								, { field: 'ageLayer', title: '年龄结构', colspan: 5, align: "center" }
								, { field: 'degreeLayer', title: '文化层次', colspan: 6, align: "center" }
							], [
								{ field: 'username', title: '姓名', width: 80, align: "center" }
								, { field: 'work', title: '职务', width: 100, align: "center" }
								, { field: 'gte50', title: '>=50', width: 80 }
								, { field: 'in40', title: '40-49', width: 80 }
								, { field: 'in30', title: '30-39', width: 80 }
								, { field: 'lt30', title: '<=29', width: 80 }
								, { field: 'average', title: '平均', width: 80 }
								, { field: 'xx', title: '小学', width: 80 }
								, { field: 'cz', title: '初中', width: 80 }
								, { field: 'gz', title: '高中', width: 80 }
								, { field: 'zz', title: '中专', width: 80 }
								, { field: 'dz', title: '大专', width: 80 }
								, { field: 'bk', title: '本科', width: 80 }


							]
						]

						, done: function (res, curr, count) {

							console.log(res, curr, count)

							//基础数据（不包括最后三行）：计算当地机务段内的救援列车分类，这决定垂直合并的行数
							// 从 第 0行开始检查，
							if (count <= 3) {
								return;
							}

							var rows = res.data;
							//获取第一个垂直合并数
							
							//c0 合并所有行
							mergeRowsVertically(tableId, 0, 0, count - 4);

							//c1，c2，c7-c17
						
							for (i = 0; i < count - 3; ) {

								var currentMergeRows = rows[i].mergeRows;
								if (!currentMergeRows) {
									break;
								}
								mergeRowsVertically(tableId, [1,2,7,8,9,10,11,12,13,14,15,16,17], i, i+currentMergeRows-1);

								i+=currentMergeRows;

							}



							//汇总数据（最后三行）
							if (count >= 3) {
								//倒数第三行
								mergeRowsHorizontally(tableId, count - 3, 3, 4);

								//倒数第二行
								mergeRowsHorizontally(tableId, count - 2, 3, 4);

								//倒数第一行
								mergeRowsHorizontally(tableId, count - 1, 1);
								// //修改最后一行 的合并的tr->td->div{width:1000px}
								findCell4JQuery(tableId, count - 1, 1).find("div").css({ width: "1000px" });

							}

							// console.log($("div[lay-id='demo2']").html())
						}

					});

				}




			}, 'json');


			/**
			 * 获取单元格
			 * @return jquery对象
			 */
			var findCell4JQuery = function (tableId, rowIndex, colIndex) {
				if (!tableId) {
					console.error("tableId is invalid!")
					return null;
				}

				var table = $("div[lay-id='" + tableId + "']");
				var tbody = table.find("tbody");
				// console.log(tbody.html())
				var rows = tbody.find("tr");

				var cols = $(rows[rowIndex]).find("td");

				return $(cols[colIndex]);
			}

			/**
			 * 垂直方向上合并单元格
			 * @param rootColIndex 需要排序的列号(start from 0)  or Array[rootColIndex...]
			 * @param startRowIndex 排序的起始行号(start from 0)
			 * @param endRowIndex 排序的结尾行号(start from 0)
			 */
			var mergeRowsVertically = function (tableId, rootColIndex, startRowIndex, endRowIndex) {
				if (!tableId) {
					console.error("tableId is invalid!")
					return;
				}

				var table = $("div[lay-id='" + tableId + "']");
				var tbody = table.find("tbody");
				// console.log(tbody.html())
				var rows = tbody.find("tr");

				if (!startRowIndex) {
					startRowIndex = 0;
				}
				if (!endRowIndex) {
					endRowIndex = rows.length - 1;
				}


				if (startRowIndex < 0 || endRowIndex < 0 || startRowIndex >= endRowIndex) {
					console.error("error:[rootColIndex<0||startRowIndex<0||endRowIndex<0||startRowIndex>=endRowIndex]")
					return;
				}

				var table = $("div[lay-id='" + tableId + "']");
				var tbody = table.find("tbody");
				// console.log(tbody.html())
				var rows = tbody.find("tr");
				// console.log(rows.length)
				//
				var startRow = $(rows[startRowIndex]).find("td");
				if (rootColIndex instanceof Array) {
					rootColIndex.forEach(e => {
						$(startRow[e]).attr("rowspan", endRowIndex - startRowIndex + 1)
					});
				} else {
					$(startRow[rootColIndex]).attr("rowspan", endRowIndex - startRowIndex + 1)
				}

				for (var i = startRowIndex + 1; i < rows.length; i++) {

					var cols = $(rows[i]).find("td");
					if (i <= endRowIndex) {
						// console.log(cols.length)
						// var cols = $(r).find("td");
						if (rootColIndex instanceof Array) {
							rootColIndex.forEach(e => {
								$(cols[e]).css("display", "none");
							});
						} else {
							$(cols[rootColIndex]).css("display", "none");
						}
						

					}

				}
			}

			/**
			 * 垂直方向上合并单元格
			 * @param rootColIndex 需要排序的行号(start from 0)
			 * @param startColIndex 排序的起始列号(start from 0)
			 * @param endColIndex 排序的结尾列号(start from 0)
			 */
			var mergeRowsHorizontally = function (tableId, rootRowIndex, startColIndex, endColIndex) {
				if (!tableId) {
					console.error("tableId is invalid!")
					return;
				}
				var table = $("div[lay-id='" + tableId + "']");
				var tbody = table.find("tbody");
				// console.log(tbody.html())
				var rows = tbody.find("tr");
				//随便取第一行
				var cols = $(rows[0]).find("td");

				if (!startColIndex) {
					startColIndex = 0;
				}
				if (!endColIndex) {
					endColIndex = cols.length - 1;
				}
				if (rootRowIndex < 0 || startColIndex < 0 || endColIndex < 0 || startColIndex >= endColIndex) {
					console.error("error:[rootRowIndex < 0 || startColIndex < 0 || endColIndex < 0 || startColIndex >= endColIndex]")
					return;
				}




				var cols = $(rows[rootRowIndex]).find("td");

				$(cols[startColIndex]).attr("colspan", endColIndex - startColIndex + 1)

				for (var i = startColIndex + 1; i <= endColIndex; i++) {
					$(cols[i]).css("display", "none")

				}


			}



		});



	</script>





</body>

</html>